import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import {Image, View, Text, Swiper, SwiperItem} from '@tarojs/components'
import { AtSearchBar } from 'taro-ui';
import "taro-ui/dist/style/components/search-bar.scss";
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'

export default function GoodsCate() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()
  const [searchKey,setSearchKey] = useState('')
  return (
    <View className='goods-cate'>
      <View className="cate-search">
        <View className="at-icon at-icon-bullet-list"></View>
        <AtSearchBar className="search-box" placeholder='搜索好物' value={searchKey} onChange={e=>{
          console.log(e,'e------')
        }} />
        <Image src={require('@/images/common/scan.svg')} mode='widthFix' style={{width:20}}></Image>
      </View>
      <View className="cate-header">
        <Image src={require('@/images/vip/cate-header.png')} mode='widthFix' style={{width:'100vw',display:'block'}}></Image>
      </View>

      <View className="cate-list">
        <View className="list-box">
        <View className="list-item">
          <Image className='item-img' src={require('@/images/vip/svip.svg')} mode='widthFix'></Image>
          S+会员
        </View>
        <View className="list-item">
          <Image className='item-img' src={require('@/images/vip/zhoubian.svg')} mode='widthFix'></Image>
          周边
        </View>
        <View className="list-item">
          <Image className='item-img' src={require('@/images/vip/jifen.svg')} mode='widthFix'></Image>
          积分
        </View>
        <View className="list-item">
          <Image className='item-img' src={require('@/images/vip/wenyu.svg')} mode='widthFix'></Image>
          文娱
        </View>
        <View className="list-item">
          <Image className='item-img' src={require('@/images/vip/other.svg')} mode='widthFix'></Image>
          其他
        </View>
        </View>
      </View>

      <View className="cate-main">
        <Swiper indicatorDots={true} className='main-swiper' indicatorActiveColor='#274bfb'>
          <SwiperItem>
            <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='swiper-img'></Image>
          </SwiperItem>
        </Swiper>
        <View className="main-imgs">
          <View className="imgs-item">
            <View className="item-title">
              <Text className='title'>会员尊享</Text>
              <View className="title-span">更多 <Text className='at-icon at-icon-chevron-right'></Text></View>
            </View>
            <View className="item-info">
              <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='info-img' mode='widthFix'></Image>
              <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='info-img' mode='widthFix'></Image>
            </View>
          </View>
          <View className="imgs-item">
            <View className="item-title">
              <Text className='title'>推荐有礼</Text>
              <View className="title-span">更多 <Text className='at-icon at-icon-chevron-right'></Text></View>
            </View>
            <View className="item-info">
              <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='info-img' mode='widthFix'></Image>
              <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='info-img' mode='widthFix'></Image>
            </View>
          </View>
        </View>
      </View>

      <View className="cate-tabs not-bar">
        <View className="tabs-item active">全部</View>
        <View className="tabs-item">食品</View>
        <View className="tabs-item">美妆护肤</View>
      </View>
      
      <View className="cate-goods">
        <View className="list-item">
          <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' className='item-img' mode='aspectFill' />
          <View style={{padding:'10px 8px'}}>
          <View className="item-h2 dot2">美影正版 阿凡提的故事 阿凡提和毛驴Q版手办...</View>
          <View className="item-info">
            <View className="info-price"><Text style={{fontSize:12}}>￥</Text>25.90</View>
            <View className="info-span">已售 200 件</View>
          </View>
          </View>
        </View>
      </View>
    </View>
  )
}
